<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/fonts.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/main.css">
</head>

<body>
    <div class="viewport">
        <!-- 头部 -->
        <header class="header">
            <div class="wrapper">
                <!-- 导航 -->
                <nav>
                    <a href="/">Home</a>
                    <a href="/about">关于我们</a>
                    <a href="/join">传智招聘</a>
                </nav>
                <!-- 注册/登录 -->
                <div class="extra">
                    <a href="/register">注册</a>
                    <a href="/login">登录</a>
                </div>
            </div>
        </header>
        <!-- 主体 -->
        <div class="body">
            <div class="wrapper">
                <!-- 侧边栏 -->
                <aside>
                    <!-- 广告位 -->
                    <div class="widget advert">
                        <header>赞助商</header>
                        <div class="cont">
                            <p>前端学院</p>
                            <a href="javascript:;">马上报名，即享优惠!</a>
                        </div>
                    </div>
                    <!-- 热门文章 -->
                    <div class="widget hot">
                        <header>热门文章</header>
                        <ul>
                            <li>
                                <a href="./article.html">WeUI 发布——微信官方UI库</a>
                            </li>
                            <li>
                                <a href="./article.html">Zen Coding: 一种快速编写HTML/CSS代码的方法</a>
                            </li>
                            <li>
                                <a href="./article.html">QQ浏览器X5内核问题汇总</a>
                            </li>
                            <li>
                                <a href="./article.html">一些必不可少的Sublime Text 2插件</a>
                            </li>
                            <li>
                                <a href="./article.html">高性能 CSS3 动画</a>
                            </li>
                            <li>
                                <a href="./article.html">[Task Master] gulp-lint</a>
                            </li>
                            <li>
                                <a href="./article.html">前端观察又改版</a>
                            </li>
                            <li>
                                <a href="./article.html">HTML5+CSS3 loading 效果收集</a>
                            </li>
                            <li>
                                <a href="./article.html">meta标签常用属性整理</a>
                            </li>
                            <li>
                                <a href="./article.html">HTML5 中 div section article 的区别</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 执门作者 -->
                    <div class="widget authors">
                        <header>热门博主</header>
                        <ul>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/botue.jpg" alt="">
                                    <span>老布头儿</span>
                                </a>
                            </li>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/monkey.png" alt="">
                                    <span>程序猿</span>
                                </a>
                            </li>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/botue.jpg" alt="">
                                    <span>老布头儿</span>
                                </a>
                            </li>
                            <li>
                                <a href="./center.html">
                                    <img src="/uploads/avatar/monkey.png" alt="">
                                    <span>程序猿</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </aside>
                <section class="main">
                    <div class="article">
                        <h2 class="title">关于我们</h2>
                        <p>首先非常感谢你来到这里，你的光临是本站的荣幸。</p>
                        <p>这里是一个纯粹的前端技术分享网站，本站的目的是为前端技术人员提供所需的资讯及资源。</p>
                        <p>向来中国的前端开发领域，就像一盘散沙一样，每个人每个站都各自为营，高手就像就像天空的星星一样多，但是他们的成就却很少广为传播，初学者却苦于在大海一样的设计中寻找自己的参考。</p>
                        <p>所以本站首先将是挖掘，挖掘国内优秀的原创设计及内容，加以高度的整理。</p>
                        <p>相信你在这里能够发现自己需要的东西，同时也希望各位能提供一些好的内容给我们。</p>
                        <p>谢谢！</p>
                        <p>同时感谢Ghost提供如此优秀的程序。</p>
                    </div>
                </section>
            </div>
        </div>
        <!-- 底部 -->
        <footer class="footer">
            <div class="wrapper">
                <dl>
                    <dt>合作网站</dt>
                    <dd>
                        <a href="javascript:;">传智播客</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">双元课堂</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">传智学院</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">博学谷在线教育平台</a>
                    </dd>
                </dl>
                <dl>
                    <dt>友情链接</dt>
                    <dd>
                        <a href="javascript:;">Swift Note GaoWhen高H温</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">大猫の意淫网志 裁纸刀下</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">Smallni's blog 米随随s5s5</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">芒果 软件开发网 觉唯前端</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">JSER CSS HOUSE Time Machine</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">前端博客导航 WEB前端开发</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关注我的微信</dt>
                    <dd>
                        <img class="qrcode" src="/images/qrcode.jpg" alt="">
                    </dd>
                </dl>
            </div>
        </footer>
    </div>
</body>

</html>